<template>
  <div class="img_item">
    <!-- 图片 -->
    <div class="img_box">
      <img :src="picUrl" alt />
    </div>
    <div class="play_num">
      <!-- 图标 -->
      <i class="iconfont icon-shiting"></i>
      <!-- 数量 -->
      <span>{{ play_count | formatNum }}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: ["picUrl", "play_count"],
  filters: {
    // 播放数量格式化
    formatNum(value) {
      let num = value / 10000;
      if (num > 10000) {
        num /= 10000;
        return num.toFixed(1) + "亿";
      }
      return num.toFixed(1) + "万";
    },
  },
};
</script>

<style lang="scss" scoped>
.img_item {
  position: relative;
  .img_box {
    width: 100%;
    img {
      display: block;
      width: 100%;
    }
  }
  .play_num {
    position: absolute;
    width: 100%;
    text-align: right;
    top: 0;
    right: 0;
    line-height: 24px;
    height: 24px;
    padding-right: 6px;
    color: #fff;
    font-size: 12px;
    background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.2));
    i {
      font-size: 12px;
      margin-right: 5px;
    }
  }
}
</style>
